<!-- 数据模块 -->
<template>
  <div>
    <component :is="borderData.name" v-bind="borderData.attr">
      {{ borderData.text || "" }}
      <div v-if="titleData.name" v-bind="titleData.attr">
        {{ titleData.name }}
      </div>
      <template v-for="(cd, i) in contentData">
        <component
          :is="cd.name"
          v-bind="cd.attr"
          :key="i + cd.name"
        ></component>
      </template>
    </component>
  </div>
</template>

<script>
import { merge } from "lodash-es";
import { type, expres } from "@/util/util";
import myChart from "./my-chart.vue";
import axios from "axios";
export default {
  name: "panel",
  components: { echart: myChart },
  props: ["border", "title", "content", "update"],
  data: () => ({
    timeHandle: undefined,
    data: {},
  }),
  computed: {
    borderData() {
      const d = this.border || "dv-border-box-11";
      const t = type(bd);
      let {
        name,
        text,
        attr: td = {},
        ...attr
      } = t === "string" ? { name: d } : { ...d };
      //
      const da = {
        class: "w-100% h-100%",
      };

      return { name, text, attr: merge(da, attr) };
    },
    titleData() {
      const d = this.title || "";
      const t = type(td);
      let {
        name,
        attr: td = {},
        ...attr
      } = t === "string" ? { name: d } : { ...d };
      if (typeof td === "string") {
        td = JSON.parse(td);
      }
      attr = { ...attr, ...td };
      return { name, attr };
    },
    contentData() {
      const cd = [].concat(this.content || []);
      const res = cd.map((d) => {
        const t = type(d);
        let {
          name,
          attr: td = {},
          ...attr
        } = t === "string" ? { name: d } : { ...d };
        //
        if (typeof td === "string") {
          td = JSON.parse(td);
        }
        attr = { ...attr, ...td };
        const dataKey = attr.dataKey;
        if (dataKey) {
          attr[dataKey] = this.data;
        }
        return { name, attr };
      });
      //
      return res;
    },
    updateData() {
      const ud = this.update || {};
      const url = ud.url || "";
      const params = ud.params || {};
      const data = ud.data || {};
      const method = ud.method || "get";
      const result = ud.result || "";
      const refresh = ud.refresh || 0;
      return { url, params, data, method, result, refresh };
    },
  },
  methods: {
    async initData() {
      const { url, params, data, method, result } = this.updateData;
      if (!url) return;
      //
      try {
        const r = await axios({ url, method, params, data });
        //
        let ctx = r.data;
        if (r.data && typeof r.data != "object") {
          ctx = { data: r.data };
        }
        let d = r.data;
        if (result) {
          d = expres(result, { ...window, ...ctx });
        }
        this.data = d;
      } catch (error) {
        console.error("=== 初始化数据失败！ ===", error);
      }
    },
  },
  created() {
    if (this.updateData.refresh > 0) {
      this.timeHandle = setInterval(() => {
        this.initData();
      }, this.updateData.refresh);
    } else {
      this.initData();
    }
  },
  beforeDestroy() {
    if (this.timeHandle) {
      clearInterval(this.timeHandle);
      this.timeHandle = undefined;
    }
  },
};
</script>
